<template>
	<a-collapse :bordered="false">
		<template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
		</template>
		<a-collapse-panel key="1" :header="i18n('grid','grid直角坐标系内绘图网格')">
			<a-row :gutter="24" style="margin: 0px">
				<a-col :span="12">
					<a-form-item :label="i18n('top','grid离容器上侧的距离')">
						<a-input type="number" v-model:value="config.styles.gridConfig.top" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.gridConfig.topSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('right','grid离容器右侧的距离')" >
						<a-input type="number" v-model:value="config.styles.gridConfig.right" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.gridConfig.rightSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24" style="margin: 0px">
				<a-col :span="12">
					<a-form-item :label="i18n('bottom','grid离容器下侧的距离')">
						<a-input type="number" v-model:value="config.styles.gridConfig.bottom" >
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.gridConfig.bottomSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('left','grid离容器左侧的距离')">
						<a-input type="number" v-model:value="config.styles.gridConfig.left" >
                            <template #addonAfter>
                                <a-select  v-model:value="config.styles.gridConfig.leftSuffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
						</a-input>
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
	</a-collapse>
</template>

<script>
/**
 * grid直角坐标系内绘图网格
 */
export default {
	name: "grid-config",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			gridConfig:{
				top:50,
				topSuffix:"px",
				bottom:30,
				bottomSuffix:"px",
				right:30,
				rightSuffix:"px",
				left:50,
				leftSuffix:"px",
			}
		}
	},
	created() {
		if(!this.config.styles.gridConfig){
            this.config.styles["gridConfig"]=this.gridConfig;
		}
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"lineBarLang.gridConfig",key);
		},
	},
	watch: {}
}
</script>

<style scoped>
</style>
